<template>
	<div class="big-container" style="padding: 20px 0;">
		<div class="container-content inner-box">
			<div class="start-layout top-bread">
				<i class="el-icon-location"></i>
				<el-breadcrumb separator-class="el-icon-arrow-right">
					<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
					<el-breadcrumb-item>搜索结果</el-breadcrumb-item>
				</el-breadcrumb>
			</div>
			<div style="padding-top: 20px;">
				<div class="search-area between-layout">
					<input class="search-input" v-model="qureyForm.title" placeholder="请输入关键词" />
					<div class="search-btn center-layout" @click="searchHandel"><i class="el-icon-search"
							style="margin-right: 6px;"></i>搜索</div>
				</div>
				<div class="right-content">
					<div style="min-height: 450px;">
						<el-empty v-if="dataList.length==0" :image-size="200"></el-empty>
						<div @click="toDetail(item.baseId)" v-for="(item,index) in dataList" :key="index"
							class="search-item">
							<div class="start-layout">
								<div class="intro-dot"></div>
								<div class="search-name" v-html="item.title"></div>
							</div>
							<div style="max-height: 60px;overflow: hidden;">
								<div class="pureContent" v-html="item.pureContent"></div>
							</div>
							<div class="start-layout">
<!--								<div class="search-date">所属栏目：{{item.typeName}}</div>-->
								<div class="search-date">
									发布时间：{{ parseTime(item.releaseTime, '{y}-{m}-{d}') }}</div>
							</div>
						</div>
					</div>
					<div v-if="total>0" style="margin-top: 50px;" class="center-layout">
						<el-pagination class="msg-pagination-container" background @current-change="handleCurrentChange"
							:current-page.sync="qureyForm.pageNum" :page-size="10" layout="prev, pager, next, jumper"
							:total="total">
						</el-pagination>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		getSearch
	} from "@/api/index";
	export default {
		data() {
			return {
				dataList: [],
				qureyForm: {
					pageSize: 10,
					pageNum: 1,
					title: "",
					tenantId: process.env.VUE_APP_TENANTID
				},
				total: 0
			}
		},
		created() {
			this.qureyForm.title = this.$route.query.keyword
			this.getList()
		},
		mounted() {
			window.scrollTo(0, 0);
		},
		methods: {
			getList() {
				getSearch(this.qureyForm).then(res => {
					this.dataList = res.rows
					this.dataList.map(item => {
						item.title = item.title.replaceAll('<em>',
							"<em style='text-decoration:none;color:red;'>")
						item.pureContent = item.pureContent.replaceAll('<em>',
							"<em style='text-decoration:none;color:red;'>")
					})
					this.total = res.total
				})
			},
			handleCurrentChange(val) {
				this.qureyForm.pageNum = val
				this.getList()
			},
			//跳转详情
			toDetail(id) {
				this.$router.push({
					name: 'searchDetail',
					query: {
						id: id
					}
				})
			},
			searchHandel() {
				this.qureyForm.pageNum = 1
				this.getList()
			}
		}
	}
</script>

<style scoped lang="scss">
	::v-deep .el-icon-location {
		color: #015293 !important;
		font-weight: 400 !important;
		font-size: 22px !important;
		margin-right: 6px;
	}

	::v-deep .el-icon-arrow-right {
		color: #015293 !important;
		font-weight: 400 !important;
		font-size: 18px !important;
	}

	/* 不被选中时的颜色 */
	.el-breadcrumb ::v-deep .el-breadcrumb__inner {
		color: #015293 !important;
		font-weight: 400 !important;
		font-size: 18px !important;
	}

	.search-area {
		width: 538px;
		height: 48px;
		background: #fff;
		border: 1px solid #AAAAAA;
		border-radius: 30px;
		-webkit-border-radius: 30px;
		-moz-border-radius: 30px;
		overflow: hidden;

		.search-input {
			width: 100%;
			margin-left: 30px;
			margin-right: 10px;
			border: none;
			outline: none;
		}

		.search-btn {
			width: 110px;
			height: 48px;
			background: #427ece;
			cursor: pointer;
			color: #ecf2fa;
			font-size: 18px;
		}
	}

	.pureContent {
		line-height: 24px;
		color: #333;
		margin-top: 10px;
	}
	.search-name{
		color: #427ece;
	}
	.search-date{
		margin-right: 20px;
		color: #999;
		margin-top: 10px;
	}
	.search-item:hover{
		background-color: #F7FBFF;
	}
	.search-item{
		padding: 20px;
		border-bottom: 1px solid #eee;
		cursor: pointer;
	}
</style>
